import React, { useState, useEffect } from 'react';
import { DualAxes } from '@ant-design/charts';

const HomeCharts = ({ salesData }) => {
  // const config = {
  //   data: salesData,
  //   xField: 'time',
  //   yField: 'value',
  //   seriesField: 'category',
  //   yAxis: {
  //     label: {
  //       formatter: function formatter(e) {
  //         return e + '万';
  //       },
  //     },
  //   },
  //   color: ['#6897a7', '#8bc0d6', '#60d7a7'],

  //   legend: { position: 'top' },
  // };
  // return <Area {...config} />;
  const uvBillData = [
    {
      time: '2019-03',
      value: 350,
      type: 'uv',
    },
    {
      time: '2019-04',
      value: 900,
      type: 'uv',
    },
    {
      time: '2019-05',
      value: 300,
      type: 'uv',
    },
    {
      time: '2019-06',
      value: 450,
      type: 'uv',
    },
    {
      time: '2019-07',
      value: 470,
      type: 'uv',
    },
    {
      time: '2019-03',
      value: 220,
      type: 'bill',
    },
    {
      time: '2019-04',
      value: 300,
      type: 'bill',
    },
    {
      time: '2019-05',
      value: 250,
      type: 'bill',
    },
    {
      time: '2019-06',
      value: 220,
      type: 'bill',
    },
    {
      time: '2019-07',
      value: 362,
      type: 'bill',
    },
  ];
  const transformData = [
    {
      time: '2019-03',
      count: 800,
      name: 'a',
    },
    {
      time: '2019-04',
      count: 600,
      name: 'a',
    },
    {
      time: '2019-05',
      count: 400,
      name: 'a',
    },
    {
      time: '2019-06',
      count: 380,
      name: 'a',
    },
    {
      time: '2019-07',
      count: 220,
      name: 'a',
    },
    {
      time: '2019-03',
      count: 750,
      name: 'b',
    },
    {
      time: '2019-04',
      count: 650,
      name: 'b',
    },
    {
      time: '2019-05',
      count: 450,
      name: 'b',
    },
    {
      time: '2019-06',
      count: 400,
      name: 'b',
    },
    {
      time: '2019-07',
      count: 320,
      name: 'b',
    },
    {
      time: '2019-03',
      count: 900,
      name: 'c',
    },
    {
      time: '2019-04',
      count: 600,
      name: 'c',
    },
    {
      time: '2019-05',
      count: 450,
      name: 'c',
    },
    {
      time: '2019-06',
      count: 300,
      name: 'c',
    },
    {
      time: '2019-07',
      count: 200,
      name: 'c',
    },
  ];
  const config = {
    data: salesData.length === 0 ? [uvBillData, transformData] : salesData,
    xField: 'time',
    yField: ['value', 'count'],
    meta: {
      value: {
        formatter: function formatter(v) {
          return Number((v / 10000).toFixed(5));
        },
      },
    },
    yAxis: {
      value: {
        label: {
          formatter: function formatter(v) {
            return ''.concat(v, '万');
          },
        },
      },
      count: {
        label: {
          formatter: function formatter(v) {
            return ''.concat(v, '笔');
          },
        },
      },
    },
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
      },
      {
        geometry: 'line',
        seriesField: 'name',
        lineStyle: function lineStyle(_ref) {
          const name = _ref.name;
          if (name === '开卡笔数') {
            return {
              lineDash: [1, 4],
              opacity: 1,
            };
          }
          return { opacity: 0.5 };
        },
      },
    ],
  };
  return <DualAxes {...config} />;
};

export default HomeCharts;
